<template>
  <div class="navBar">
    <div class="navBarBox">
      <router-link to="/findMusic" tag="div">
        <img
          class="headerLogo"
          :src="require('@/assets/imges/header-logo.jpg')"
          alt=""
        />
        <span class="logoTxt">网易云音乐</span>
      </router-link>
      <router-link to="/findMusic" tag="li"><i></i>发现音乐</router-link>
      <router-link to="/mymusic" tag="li"><i></i>我的音乐</router-link>
      <router-link to="/friend" tag="li"><i></i>朋友</router-link>
      <!-- <router-link to="/shoppingmall" tag="li"><i></i>商城</router-link>
      <router-link to="/musician" tag="li"><i></i>音乐人</router-link> -->
      <a target="_blank" href="https://music.163.com/store/product">商城</a>
      <a target="_blank" href="https://music.163.com/st/musician">音乐人</a>
      <router-link to="/download" tag="li"
        ><i></i>下载客户端<span class="downloadHot"></span>
      </router-link>
      <div class="searchBox">
        <i class="iconfont icon-fangdajing"></i>
        <input
          class="search"
          type="text"
          v-model="searchVal"
          @keydown.enter="pushSearch"
          placeholder="音乐/视频/电台/用户"
        />
      </div>
      <div class="CreatorLink">创作者中心</div>
      <div class="userOperationBox">
        <div
          class="loginLink"
          v-if="!isLogin"
          @click="setChange_isShowLoginBox(true)"
        >
          登录
        </div>
        <img
          v-if="isLogin"
          :src="userInfo.profile.avatarUrl"
          class="headPortrait"
          alt=""
        />
        <div v-if="isLogin" class="hoverShowBox">
          <i class="triangle"></i>
          <ul class="operationItemBox">
            <router-link
              tag="li"
              :to="{ name: 'uhome', query: { id: userInfo.profile.userId } }"
              ><i class="homepage"></i>我的主页</router-link
            >
            <router-link
              tag="li"
              :to="{
                name: 'News',
                query: { id: userInfo.profile.userId, type: 1 },
              }"
              ><i class="news"></i>我的消息</router-link
            >
            <li><i class="Grade"></i>我的等级</li>
            <li><i class="vipMember"></i>VIP会员</li>
            <li><i class="setUp"></i>个人设置</li>
            <li><i class="RealName"></i>实名认证</li>
            <li @click="outLogin"><i class="signOut"></i>退出</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      searchVal: "",
    };
  },
  created() {},
  computed: {
    ...mapGetters("loginStore", ["isLogin"]),
    ...mapState("loginStore", ["isShowLoginBox", "userInfo"]),
  },
  methods: {
    ...mapActions("loginStore", ["setChange_isShowLoginBox", "loginOut"]),
    outLogin() {
      this.loginOut();
      this.$message({
        message: "账号已退出",
        type: "success",
      });
    },
    pushSearch() {
      if (!this.searchVal.trim()) return;
      this.$router.push({
        name: "search",
        query: { name: this.searchVal, type: 1 },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.headerLogo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  vertical-align: middle;
}
.navBar {
  position: relative;
  z-index: 1000;
  height: 70px;
  box-sizing: border-box;
  background: #242424;
  border-bottom: 1px solid #000;
  .navBarBox {
    width: 1100px;
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
    .logoTxt {
      vertical-align: middle;
      font-weight: 100;
      font-size: 24px;
      color: #fff;
      margin-left: 5px;
      padding-right: 19px;
    }
    .downloadHot {
      position: absolute;
      top: 21px;
      left: 100px;
      width: 28px;
      height: 19px;
      background-image: url("./../../assets/imges/homeIcon.png");
      background-repeat: no-repeat;
      background-position: -191px 0px;
    }
    .searchBox {
      position: relative;
      margin-left: 70px;
      .search {
        width: 126px;
        height: 32px;
        border-radius: 16px;
        border: 0;
        font-size: 12px;
        padding-left: 35px;
        outline: none;
      }
    }
    > li.router-link-active i {
      display: block;
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      margin: auto;
      border-color: transparent transparent #c20c0c transparent;
      border-style: solid;
      width: 0;
      border-width: 0 7px 7px 7px;
    }
    > li.router-link-active {
      background: #000;
    }
  }
  .navBarBox > li,
  .navBarBox > a {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 19px;
    color: #ccc;
    font-size: 14px;
    position: relative;
  }
  .navBarBox > li:hover,
  .navBarBox > a:hover {
    background: #000;
    font-size: 14px;
    cursor: pointer;
  }
}

.icon-fangdajing {
  position: absolute;
  left: 10px;
  top: 8px;
}
.CreatorLink {
  width: 90px;
  height: 32px;
  margin-left: 12px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #4f4f4f;
  line-height: 33px;
  color: #ccc;
  border-radius: 20px;
  font-size: 12px;
}
.loginLink {
  width: 28px;
  color: #787878;
  outline: none;
  font-size: 12px;
  margin-left: 20px;
}

.userOperationBox {
  position: relative;
  &:hover {
    .hoverShowBox {
      display: block;
    }
  }
  .headPortrait {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 0 0 20px;
  }
  .hoverShowBox {
    display: none;
    position: absolute;
    font-size: 12px;
    color: #ccc;
    width: 158px;
    background: #2b2b2b;
    top: 38px;
    right: -65px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    border: 1px solid #202020;
    .triangle {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: -7px;
      margin: auto;
      border-color: transparent transparent #2b2b2b transparent;
      border-style: solid;
      width: 0;
      border-width: 0 7px 7px 7px;
    }
    .operationItemBox {
      li {
        height: 34px;
        line-height: 34px;
        border-bottom: 1px solid #232323;
        i {
          margin: 0 10px 0 24px;
          width: 18px;
          display: inline-block;
          height: 18px;
          vertical-align: middle;
          background: url("./../../assets/imges/loginIcon.png") no-repeat;
          &.homepage {
            background-position: 0 -80px;
          }
          &.news {
            background-position: -20px -120px;
          }
          &.Grade {
            background-position: 0 -100px;
          }
          &.vipMember {
            background-position: 0 -221px;
          }
          &.setUp {
            background-position: 0 -140px;
          }
          &.RealName {
            background-position: -20px -142px;
          }
          &.signOut {
            background-position: 0 -200px;
          }
        }
      }
    }
  }
}
</style>